<template>
  <div>
    <h2>{{msg.toUpperCase()}}</h2>
    <h2>{{msg2}}</h2>
    <h2>{{msg3()}}</h2>
    <h2>{{msg | upper}}</h2>
    <h2>{{msg | cut(2)}}</h2>
    <h2>{{msg | cut(3)}}</h2>
    <h2>{{msg | cut(4)}}</h2>
    <h2>{{msg | upper | cut(1)}}</h2>
  </div>
</template>

<script>
  export default {
    name:'App',
    data() {
      return {
        msg:'hello'
      }
    },
    computed: {
      msg2(){
        return this.msg.toUpperCase()
      }
    },
    methods: {
      msg3(){
        return this.msg.toUpperCase()
      }
    },
    filters:{
      // upper函数何时调用？ —— 有人使用该过滤器的时候
      // upper函数中this是谁？ —— 爱谁谁，反正不是vm或vc
      upper:(value)=>{
        // console.log('@@',this)
        return value.toUpperCase()
      },
      cut(value,n){
        return value.slice(0,n)
      }
    }
  }
</script>